<template>
	<view class="wrap">
		<view class="tHeader">
			<g-header :title="navigationBarTitleText" @rightclick="onSkipTap('addCustomer')"></g-header>
			<view class="search">
				<u-search placeholder="输入客户名称、手机号搜索" v-model="keyword" height="60" :animation="true"
					search-icon-color="#b3b3b3" placeholder-color="#b3b3b3" @search="onSearchConfirm"
					@custom="onSearchConfirm"></u-search>
			</view>
		</view>
		<view class="list" v-if="list.length > 0">
			<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in list" :key="index"
				@click="onDelTap" :options="options" @content-click="onSkipTap('customerInfo', index)" @open="onOpen">
				<view class="item app_arrow">
					<view class="item-user">
						<text>{{item.name}}</text>
						<text>{{item.tel}}</text>
					</view>
					<view class="item-addr">{{item.showAddr}}</view>
				</view>
			</u-swipe-action>
		</view>
		<no-data v-if="list.length == 0 && hasLoad"></no-data>
		<no-more v-if="page > 1 && noMore"></no-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				backType: 0, // 1 返回上一页， 0 用户信息详情
				list: [],
				totalPage: 1,
				page: 1,
				size: 15,
				hasLoad: false,
				noMore: false,
				navigationBarTitleText: '选择客户',
				keyword: '',
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#ff3333'
					}
				}]
			}
		},
		onLoad(options) {
			this.backType = options.backType || 0
			this.updatePage()
		},
		onShow() {
			// console.log(getCurrentPages());
		},
		onUnload() {
			uni.$off('update-customerList', this.updatePage)
		},
		onPullDownRefresh() {
			this.updatePage()
		},
		onReachBottom() {
			this.page++
			this.getList()
		},
		methods: {
			updatePage() {
				this.resetPage()
				this.getList()
			},
			resetPage() {
				this.list = []
				this.page = 1
				this.totalPage = 1
				this.size = 15
				this.hasLoad = false
				this.noMore = false
			},
			onSkipTap(type, params) {
				uni.$off('update-customerList', this.updatePage)
				uni.$on('update-customerList', this.updatePage)

				const urlObj = {
					customerInfo: () => {
						if (this.backType == 1) {
							uni.$emit('update-addSalesOrderCustomer', this.list[params])
							uni.navigateBack()
						} else {
							uni.navigateTo({
								url: `/pages/customerManagement/customerInfo?id=${this.list[params].id}`
							})
						}
					},
					addCustomer: '/pages/customerManagement/addCustomer'
				}
				this.$g_util.navigationTo(urlObj, type)
			},
			onSearchConfirm(keyword) {
				this.keyword = keyword
				this.updatePage()
			},
			getList() {
				if (this.page > this.totalPage) return
				this.$g_api.saleslipSeachCustomers({
					searchText: this.keyword,
					pageNum: this.page,
					pageSize: this.size
				}).then(({
					rows,
					totalPage
				}) => {
					uni.stopPullDownRefresh()
					this.hasLoad = true
					this.totalPage = totalPage
					if (rows?.length > 0) {
						rows.forEach(item => {
							item.showAddr = item.provinceStr + item.cityStr + item.countyStr + item.address
							item.show = false
						})
						this.list = this.list.concat(rows)
					} else {
						this.noMore = true
					}
				})
			},
			onDelTap(index) {
				this.$g_api.saleslipDelCustomer({
					id: this.list[index].id
				}).then(() => {
					uni.showToast({
						title: '删除成功'
					})
					this.updatePage()
				})
			},
			onOpen(index) {
				this.list.forEach((item, idx) => {
					item.show = index == idx
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.app_arrow {
		&::after {
			width: 14rpx;
			height: 14rpx;
		}
	}

	.wrap {
		padding-top: calc(var(--status-bar-height) + 98rpx + 60rpx + 20rpx);
	}

	.tHeader {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		background-color: #fff;
		padding-bottom: 20rpx;
		border-bottom: 1px solid $g-border-color;
		z-index: 9999;
	}

	.search {
		padding: 0 30rpx;
	}

	.list {
		background-color: #fff;
	}

	.item {
		padding: 30rpx;
		border-bottom: 1px solid $g-border-color;

		&::after {
			right: 38rpx;
		}
	}

	.item-user {
		margin-bottom: 20rpx;
		font-size: 30rpx;

		text {
			&:first-child {
				margin-right: 20rpx;
				font-weight: bold;
			}
		}
	}

	.item-addr {
		font-size: 24rpx;
		color: #999;
	}
</style>
